<script setup>
import { onMounted, reactive, ref } from "vue";
import router from "@/router";
import { InfoFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/UserStore";
const useuserstore = useUserStore();

// 点击确定退出登录
const confirm = () => {
  useuserstore.routePathFun();
  localStorage.removeItem("useUserStore");
  localStorage.clear();

  router.push("/login");
};

// 头像和用户名
const avator = ref("");
const username = ref("");

onMounted(() => {
  if (useuserstore.User === "1") {
    // 管理员登录
    // console.log(666);
    avator.value =
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
    username.value = useuserstore.AdminUser[0].username;
    // console.log(useuserstore.AdminUser[0].username);
    // console.log(username.value);
  } else {
    // 会员登录
    avator.value = useuserstore.VipUser[0].hyimg;
    username.value = useuserstore.VipUser[0].name;
  }
});
// 获取本地存储的用户信息
</script>

<template>
  <div class="header">
    <div>健身房管理系统</div>
    <div>
      <el-popconfirm
        width="120"
        :icon="InfoFilled"
        icon-color="#626AEF"
        title="是否要退出登录?"
        @confirm="confirm"
      >
        <template #reference>
          <div class="flex-box">
            <img
              :src="avator"
              alt=""
              width="30px"
              height="30px"
              style="border-radius: 50%"
            />

            <span style="font-size: 16px; margin-left: 5px">{{
              username
            }}</span>
          </div>
          <!-- <el-button>退出登录</el-button> -->
        </template>
        <template #actions="{ confirm, cancel }">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button type="danger" size="small" @click="confirm">
            确定
          </el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex-box {
  display: flex;
  align-items: center;
  height: 100%;
}
.header {
  display: flex;
  background-color: skyblue;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  //  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  box-sizing: border-box;
  padding: 0 15px;
  div {
    font-size: 26px;
  }
}
</style>
